<template>
  <div class="inte-fun">
    <div
      v-for="(item,index) in funBtns"
      :key="index"
      class="fun"
      @click="seeAll(item)"
    >
      <img class="img" :src="`https://img-cdn.rsm-lab.com/mlab/mlab-fitment/image/home/${item.icon}.png`" />
      <div class="fun-name">
        {{ item.title }}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, toRaw } from 'vue';
const funBtns = reactive([
  {
    title: '预约量房',
    path: '/pagesSub/roomMeasured/index',
    icon: 'yylf',
  },
  {
    title: '免费报价',
    path: '/pagesSub/freeOffer/index',
    icon: 'mfbj',
  },
  {
    title: '精选案例',
    tabPath: '/pages/case/index',
    icon: 'jxal',
  },
  {
    title: 'VR样板间',
    path: '/pagesSub/vr/index',
    icon: 'vr',
  },
  {
    title: '设计团队',
    path: '/pagesSub/designerList/index',
    icon: 'sjtd',
  },
  {
    title: '在建工地',
    path: '/pagesSub/construction/index',
    icon: 'zjgd',
  },
  {
    title: '精彩活动',
    path: '/pagesSub/activity/index',
    icon: 'jchd',
  },
  {
    title: '我的装修',
    tabPath: '/pages/myFitment/index',
    icon: 'wdzx',
  },
])
const emit = defineEmits(['seeAll'])
const seeAll = (item:any) => {
  emit('seeAll', item)
}
</script>

<style lang="scss">
.inte-fun {
    padding: 15px 0;
    box-sizing: border-box;
    background: #ffffff;
    display: flex;
    flex-wrap: wrap;
    .fun {
        width: 25%;
        text-align: center;
        display: inline-block;
        padding: 5px 0;
        .img {
            height: 28px;
            width: 28px;
            margin: 0 auto;
            vertical-align: middle;
        }
        .fun-name {
          padding-top: 8px;
          font-size: 13px;
          font-weight: 400;
          color: #111111;
        }
    }
}
</style>
